<template>
  <view class="live-el mx20 mb10">
    <view class="head">
      <text class="head-title">热门直播</text>
      <view class="head-more" @tap="$yrouter.push('/pages/shop/Live/LiveList/index')">
        <text>更多</text>
        <text class="cuIcon-right"></text>
      </view>
    </view>
    <view class="content-one">
      <view class="content-one__item" v-for="live in detail" :key="live.roomId" @tap="goRoom(live)">
        <image class="item-cover" :src="live.shareImge" mode="widthFix"></image>
        <view class="item-status">
          <image class="status-img" :src="liveStatus[live.liveStatus].img" mode=""></image>
          <text class="status-text">{{ liveStatus[live.liveStatus].title }}</text>
        </view>
        <view class="item-title">{{ live.name }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import ShopLiveCard from '@/components/ShopLiveCard.vue'

let HAS_LIVE = false
// #ifdef MP-WEIXIN
HAS_LIVE = true
let livePlayer = null
if (HAS_LIVE) {
  livePlayer = requirePlugin('live-player-plugin')
}
//  #endif
import { yxWechatLive, getLiveReplay } from '@/api/live'

let timer = null
export default {
  components: {
    ShopLiveCard,
  },
  data() {
    return {
      liveList: [],
      liveStatus: {
        '101': {
          img: `${this.$VUE_APP_RESOURCES_URL}/images/live.png`,
          title: '直播中',
        },
        '102': {
          img: `${this.$VUE_APP_RESOURCES_URL}/images/prevue.png`,
          title: '未开始',
        },
        '103': {
          img: `${this.$VUE_APP_RESOURCES_URL}/images/playback.png`,
          title: '已结束',
        },
        '104': {
          img: `${this.$VUE_APP_RESOURCES_URL}/images/104.png`,
          title: '禁播',
        },
        '105': {
          img: `${this.$VUE_APP_RESOURCES_URL}/images/105.png`,
          title: '暂停中',
        },
        '106': {
          img: `${this.$VUE_APP_RESOURCES_URL}/images/106.png`,
          title: '异常',
        },
        '107': {
          img: `${this.$VUE_APP_RESOURCES_URL}/images/past.png`,
          title: '已过期',
        },
      },
    }
  },
  props: {
    detail: Array,
  },
  created() {},
  mounted() {
    let that = this
    timer = setInterval(() => {
      that.getLiveStatus()
    }, 60000)
  },
  beforeDestroy() {
    timer = null
  },
  computed: {},
  methods: {
    // 直播列表
    getLiveList() {
      // let that = this;
      // yxWechatLive({
      // 	page: 1,
      // 	size: 10,
      // }).then(res => {
      // 	console.log(res)
      // })
    },
    // 轮询liveStatus
    getLiveStatus() {
      // 	if (HAS_LIVE) {
      // 		let that = this;
      // 		let date = '';
      // 		if (that.detail.liveStatus == 102) {
      // 			date = that.$tools.dateFormat('mm-dd HH:MM', new Date(that.detail.starttime * 1000)).replace('-',
      // 				'/');
      // 			that.liveStatus['102'].title = '预告 ' + date;
      // 		}
      // 		livePlayer
      // 			.getLiveStatus({
      // 				room_id: that.detail.roomId
      // 			})
      // 			.then(res => {
      // 				// 101: 直播中, 102: 未开始, 103: 已结束, 104: 禁播, 105: 暂停中, 106: 异常，107：已过期
      // 				that.detail.liveStatus = res.liveStatus;
      // 			})
      // 			.catch(err => {
      // 				console.log('get live status', err);
      // 			});
      // 	}
    },
    goRoom(live) {
      wx.navigateTo({
        url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${live.roomId}`,
      })
    },
  },
}
</script>

<style lang="scss">
.live-el {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx 20rpx 25rpx;

  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;

    &-title {
      font-size: 32rpx;
      font-weight: bold;
      font-family: PingFang SC;
      color: rgba(51, 51, 51, 1);
    }

    &-more {
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
    }
  }

  // 单个大图直播
  .content-one {
    .content-one__item {
      position: relative;
      height: 280rpx;
      border-radius: 20rpx;
      margin-top: 25rpx;
      overflow: hidden;

      .item-cover {
        background-color: #eee;
        width: 100%;
        height: 100%;
      }

      .item-status {
        position: absolute;
        top: 20rpx;
        left: 10rpx;
        height: 40rpx;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 20rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        .status-img {
          width: 38rpx;
          height: 38rpx;
        }

        .status-text {
          font-size: 22rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
          padding: 0 10rpx;
        }
      }

      .item-title {
        width: 680rpx;
        position: absolute;
        bottom: 0;
        line-height: 60rpx;
        padding: 0 20rpx;
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        background: linear-gradient(transparent, rgba(#000, 0.5));
      }

      .like-img {
        position: absolute;
        bottom: 20rpx;
        right: 10rpx;
        width: 60rpx;
        height: 130rpx;
      }
    }
  }

  // 双图直播
  .content-two {
    width: 100%;
    // -moz-column-count: 2;
    // -webkit-column-count: 2;
    // column-count: 2;
    // padding-top: 20rpx;
    display: flex;
    flex-wrap: wrap;

    &__item {
      margin-right: 30rpx;
      margin-top: 20rpx;

      &:nth-child(2n) {
        margin-right: 0;
      }
    }
  }
}
</style>
